

$(function () {
    //vue获取数据
    var vm = new Vue({
        el: "#vueBox",
        data: {
            //每页有多少数据
            pageSize:5,
            //这是第几页的数据
            pageNum:1,
            //关键词
            keyword:"",
            //需要显示的数据，可以是查出来的数据
            MyData:{},
            //在删除的时候存放角色编号的数组
            cretIdArray:[],
            //在修改的时候存放角色编号
            certId:0,
        },
        methods: {
            selectByKey: function(pageNum) {
                axios.get("/cert/search/by/keyword",{
                    params: {
                        pageSize: this.pageSize,
                        pageNum:this.pageNum,
                        keyword:this.keyword
                    }
                }).then(res => {
                    if(res.data.result === "SUCCESS"){
                        this.MyData = res.data.data;
                        this.initPagination();
                    }
                })
            },

            searchBtnClick:function(){
                // 验证输入数据是否有效
                if(this.keyword == null || this.keyword == "") {
                    // 如果无效，提示，停止函数执行
                    layer.msg("请输入关键词！");
                    return ;
                }
                this.selectByKey(1);
            },

            // 声明函数封装导航条初始化操作
            initPagination: function () {
                // 声明变量存储总记录数
                //获取总行数
                var totalRecord = [[this.MyData.total]];
                // 声明变量存储分页导航条显示时的属性设置
                var paginationProperties = {
                    num_edge_entries : 3,        //边缘页数
                    num_display_entries : 5,      //主体页数
                    callback : this.pageselectCallback, //回调函数
                    items_per_page : [[this.MyData.pageSize]],    //每页显示数据数量，就是pageSize
                    current_page : [[this.MyData.pageNum-1]],//当前页页码
                    prev_text : "上一页",       //上一页文本
                    next_text : "下一页"        //下一页文本
                };
                // 显示分页导航条
                //调用它封装好的方法，以显示分页
                $("#Pagination").pagination(totalRecord, paginationProperties);
            },


            // 在每一次点击“上一页”、“下一页”、“页码”时执行这个函数跳转页面
            pageselectCallback: function (pageIndex, jq) {
                // pageIndex从0开始，pageNum从1开始
                //网后台传值的时候在加回来
                var pageNum = pageIndex + 1;
                var keyword=$('[name="keyword"]').val();
                // 跳转页面
                this.pageNum = pageNum;
                this.keyword = keyword;
                this.selectByKey();
                return false;
            },
            //点击批量删除，出现模态框
            batchRemoveBtnClick:function () {
                // 获取被选中的itemBox数组长度
                var length = $(".itemBox:checked").length;
                // 如果长度为0，说明没有选择itemBox
                if(length == 0) {
                    layer.msg("请至少选择一条！");
                    return ;
                }
                // 在全局作用域内创建certIdArray
                var certIdArray = new Array();
                // 遍历$(".itemBox:checked")
                $(".itemBox:checked").each(function(){
                    // 通过checkbox的certid属性获取certId值
                    var certId = $(this).attr("certid");
                    // 存入数组
                    certIdArray.push(certId);
                });
                this.certIdArray = certIdArray;
                //alert(this.certIdArray);
                window.certIdArray = this.certIdArray;
                // 调用函数打开模态框
                this.showRemoveConfirmModal();
            },

            //显示模态框
            showRemoveConfirmModal:function () {
                // 1.将模态框显示出来
                $("#confirmModal").modal("show");
                console.log(this.certIdArray)
                axios.post("/cert/get/list/by/id/list",this.certIdArray).then(res => {
                    if(res.data.result == "SUCCESS") {
                        // 5.如果成功，显示数据
                        // 3.清空#confirmModalTableBody
                        $("#confirmModalTableBody").empty();
                        // 4.填充#confirmModalTableBody
                        var certList =res.data.data;
                        for(var i = 0; i < certList.length; i++) {
                            // 5.获取角色相关数据
                            var cert = certList[i];
                            var id = cert.id;
                            var name = cert.name;
                            var trHTML = "<tr><td>" + id + "</td><td>" + name + "</td></tr>";
                            // 6.执行填充
                            $("#confirmModalTableBody").append(trHTML);
                        }
                    }else{
                        layer.msg(ajaxResult.message);
                        return null;
                    }
                })
            },
            confirmModalBtnCilck:function () {
                axios.post("/cert/batch/remove",this.certIdArray).then(res => {
                    var result = res.data.result;
                    if(result == "SUCCESS") {
                        layer.msg("操作成功！");
                        // 如果删除成功，则重新调用分页方法
                        this.selectByKey(1);
                    }
                    if(result == "FAILED") {
                        layer.msg(res.data.message);
                    }
                    // 不管成功还是失败，都需要关掉模态框
                    $("#confirmModal").modal("hide");
                })
            },


            //单项删除
            removeBtnClick:function (e) {

                var arr = new Array();
                // 获取当前记录的roleId
                // e.target 是你当前点击的元素
                // e.currentTarget 是你绑定事件的元素
                var certId = $(e.currentTarget).attr("certId");
                // 存入全局变量数组
                arr.push(certId);
                this.certIdArray = arr;
                window.certIdArray = this.certIdArray;
                this.showRemoveConfirmModal();
            },

            //点击新增按钮，弹出模态框
            addBtnClick:function () {
                $("#addModal").modal("show");
            },
            //点击添加按钮
            addModalBtnClick:function () {
                var certName = $.trim($("#certNameInput").val());
                if(certName == null || certName == "") {
                    layer.msg("请输入有效角色名称！");
                    return ;
                }
                axios.get("/cert/save/role",{
                    params: {
                        certName:certName
                    }
                }).then(res => {
                    var result = res.data.result;
                    if(result == "SUCCESS") {
                        layer.msg("操作成功！");
                        // 前往最后一页
                        this.pageNum = 999999;
                        this.selectByKey();
                        // 不管成功还是失败，关闭模态框
                        $("#addModal").modal("hide");
                        // 清理本次在文本框填写的数据
                        $("#roleNameInput").val("");
                    }else {
                        layer.msg(response.message);
                    }
                })
            },
            //点击修改按钮
            editBtnClick:function (e) {
                // 1.获取当前按钮的roleId
                this.certId = $(e.currentTarget).attr("certId");
                console.log(this.certId)
                // 2.获取当前按钮所在行的roleName
                var certName = $(e.currentTarget).parents("tr").children("td:eq(2)").text();
                // 3.修改模态框中文本框的value值，目的是在显示roleName
                $("#certNameInputEdit").val(certName);
                console.log(certName)
                // 4.打开模态框
                $("#editModal").modal("show");
            },

            //点击模态框中的修改
            editModalBtnClick:function () {
                // 1.获取文本框值
                var certName = $.trim($("#certNameInputEdit").val());
                if(certName == null || certName == "") {
                    layer.msg("请输入有效角色名称！");
                    return ;
                }
                console.log(this.certId)
                axios.get("/cert/update/role",{
                    params: {
                        "id":this.certId,
                        "name":certName
                    }
                }).then(res => {
                    var result = res.data.result;
                    if(result == "SUCCESS") {
                        layer.msg("操作成功！");
                        // 3.操作成功重新分页
                        this.selectByKey();
                    }
                    if(result == "FAILED") {
                        layer.msg(res.data.message);
                    }

                    // 4.不管成功还是失败，关闭模态框
                    $("#editModal").modal("hide");
                })
            },




        },
        mounted() {
            this.selectByKey(1);
        },
    })
})




$(function () {
    //实现全选
    $("#summaryBox").click(function() {
        // 获取当前#summaryBox的勾选状态
        // this代表当前多选框对象（DOM对象）
        // checked属性为true时表示被勾选，为false时表示没有被勾选
        // 使用checkStatus设置.itemBox的状态
        //prop与attr都是修改元素属性，但是prop对于新增的元素也有效果
        $(".itemBox").prop("checked",this.checked);
    });

//确认删除
    /*  $("#confirmModalBtn").click(function () {
          var requestBody = JSON.stringify(window.roleIdArray);
          $.ajax({
              url:"/role/batch/remove",
              type:"post",
              data:requestBody,
              contentType:"application/json;charset=UTF-8",
              dataType:"json",
              success:function(response){
                  var result = response.result;
                  if(result == "SUCCESS") {
                      layer.msg("操作成功！");
                      // 如果删除成功，则重新调用分页方法
                      window.location = "/role/to/page.html";
                  }
                  if(result == "FAILED") {
                      layer.msg(response.message);
                  }
                  // 不管成功还是失败，都需要关掉模态框
                  $("#confirmModal").modal("hide");

              },
              "error":function(response){
                  layer.msg(response.message);
              }
          });
      })*/

})